Vision-based Presentation Modeling of Web Applications: A Reverse Engineering Approach

Presentation modeling, which captures the layout of an HTML page, is a very important aspect of modeling Web Applications (WAs). However, presentation modeling is often neglected during forward engineering of Web Applications; therefore, most of these applications are poorly modeled or not modeled at all. This paper discusses the design, implementation, and evaluation of a reverse engineering tool that extracts and builds appropriate UML presentation model of existing Web Applications. The tool consists of three steps. First, we identify and extract visual blocks and presentation elements of an HTML page such as navigation bars, header sections, text input, etc. In this step, we adopt the VIPS algorithm, which divides an HTML into semantically coherent blocks. Second, the identified presentation elements in step one are mapped to the most appropriate UML presentation model elements. Third, the resulting presentation model is made available in Magicdraw for manipulation. Our approach is applied and evaluated in the Goalzz home page.